<section class="main-section grid_7">
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</script>

  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['annotatedtimeline', 'motionchart']});
    function getDataAndRender(viz_function, data_type){
      $.ajax({url:"/getanalytics?type=" +data_type,
              dataType: 'json',
              success: function(data){
                viz_function(data) 
              }});
    }
    function getDateObj(date_string){
      var dateArray = date_string.split("-");
      return new Date(dateArray[0], dateArray[1] -1 , dateArray[2]) ;
    }

    var vbadges = function drawBadgesVisualization(points) {
      if (points['success'] != "true"){
        $("#BadgesVisualization").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date'); 
      var numBadges = points['numbadges'];
      var badges = points['badges'];
      var badge_column_index = new Array();
      for (var ii = 0; ii<numBadges; ii++){
        data.addColumn('number', badges[ii]);
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        badge_column_index[badges[ii]] = ii * 3 + 1;
      }
      if (numBadges < 1){
        // To render even if there is no data
        data.addColumn('number', "Badges");
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
      }
      numPoints = points['total']; 
      data.addRows(numPoints + 1);
      for (ii = 0; ii<numPoints; ii++){
        var badgeid = points['entry'][ii]['badgeid'];
        data.setValue(ii, 0, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, badge_column_index[badgeid], parseInt(points['entry'][ii]['count']));
      }
      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('BadgesVisualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    };

    var vbadgepoints = function drawBadgePointsVisualization(points) {
      if (points['success'] != "true"){
        $("#BadgePointsVisualization").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date'); 
      var numBadges = points['numbadges'];
      var badges = points['badges'];
      var badge_column_index = new Array();
      for (var ii = 0; ii<numBadges; ii++){
        data.addColumn('number', badges[ii]);
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        badge_column_index[badges[ii]] = ii * 3 + 1;
      }
      if (numBadges < 1){
        // To render even if there is no data
        data.addColumn('number', "Badge Points");
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
      }
      numPoints = points['total']; 
      data.addRows(numPoints + 1);
      for (ii = 0; ii<numPoints; ii++){
        var badgeid = points['entry'][ii]['badgeid'];
        data.setValue(ii, 0, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, badge_column_index[badgeid], parseInt(points['entry'][ii]['count']));
      }

      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('BadgePointsVisualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    };

    var vpoints = function drawPointsVisualization(points) {
      if (points['success'] != "true"){
        $("#PointsVisualization").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Points Awarded');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      numPoints = points['total']; 
      data.addRows(numPoints + 1);
      var ii = 0;
      for (ii = 0; ii<numPoints; ii++){
        data.setValue(ii, 0, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, 1, parseInt(points['entry'][ii]['count']));
      }
      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('PointsVisualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    };

    var vapicalls = function drawAPICallsVisualization(points) {
      if (points['success'] != "true"){
        $("#APICallsVisualization").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'API Calls');
      data.addColumn('string', 'title1');
      data.addColumn('string', 'text1');
      numPoints = points['total']; 
      data.addRows(numPoints + 1);
      var ii = 0;
      for (ii = 0; ii<numPoints; ii++){
        data.setValue(ii, 0, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, 1, parseInt(points['entry'][ii]['count']));
      }
      var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
          document.getElementById('APICallsVisualization'));
      annotatedtimeline.draw(data, {'displayAnnotations': true});
    };
    var vbadgepointsmotion = function drawBadgePointsVisualizationMotion(points) {
      if (points['success'] != "true"){
        $("#BadgePointsVisualizationMotion").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Badges'); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Points');
      var numBadges = points['numbadges'];
      var badges = points['badges'];
      var badge_column_index = new Array();
      numPoints = points['total']; 
      data.addRows(numPoints);
      for (ii = 0; ii<numPoints; ii++){
        var badgeid = points['entry'][ii]['badgeid'];
        data.setValue(ii, 0, badgeid);
        data.setValue(ii, 1, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, 2, parseInt(points['entry'][ii]['count']));
      }
      var chart = new google.visualization.MotionChart(
          document.getElementById('BadgePointsVisualizationMotion'));
      chart.draw(data, {width: 700, height: 400});
    };
    var vbadgesmotion = function drawBadgeVisualizationMotion(points) {
      if (points['success'] != "true"){
        $("#BadgesVisualizationMotion").html("ERROR Rendering");
        return;
      }
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Badges'); 
      data.addColumn('date', 'Date'); 
      data.addColumn('number', 'Frequency');
      var numBadges = points['numbadges'];
      var badges = points['badges'];
      var badge_column_index = new Array();
      numPoints = points['total']; 
      data.addRows(numPoints);
      var startdate = points['entry'][0]['date'];
      for (ii = 0; ii<numPoints; ii++){
        var badgeid = points['entry'][ii]['badgeid'];
        data.setValue(ii, 0, badgeid);
        data.setValue(ii, 1, getDateObj(points['entry'][ii]['date'])); 
        data.setValue(ii, 2, parseInt(points['entry'][ii]['count']));
        startdate = points['entry'][ii]['date'];
      }
      var chart = new google.visualization.MotionChart(
          document.getElementById('BadgesVisualizationMotion'));
      var options = {}; 
      //options['state'] = '{"showTrails":true,"duration":{"timeUnit":"D","multiplier":1},"playDuration":15000,"yLambda":1,"time":"'+ startdate + '","xAxisOption":"2","iconType":"BUBBLE","nonSelectedAlpha":0.4,"colorOption":"_UNICOLOR","xZoomedIn":false,"iconKeySettings":[],"xZoomedDataMax":158,"dimensions":{"iconDimensions":["dim0"]},"yAxisOption":"2","yZoomedDataMax":158,"yZoomedDataMin":1,"sizeOption":"_UNISIZE","yZoomedIn":false,"xLambda":1,"orderedByY":false,"uniColorForNonSelected":false,"xZoomedDataMin":1,"orderedByX":false};';
      options['height'] = 400;
      options['width'] = 700;
      //chart.draw(data, {width: 700, height: 400});
      chart.draw(data, options);
 
    };
       
    function drawVisualizations(){
      $("#APICallsVisualization").html("Rendering...");
      $("#APICallsVisualizationMotion").html("Rendering...");
      $("#PointsVisualization").html("Rendering...");
      $("#BadgePointsVisualization").html("Rendering");
      $("#BadgePointsVisualizationMotion").html("Rendering");
      $("#BadgesVisualization").html("Rendering...");
      getDataAndRender(vapicalls, "apicalls");
      getDataAndRender(vpoints, "points");
      getDataAndRender(vbadges, "badges");
      getDataAndRender(vbadgesmotion, "badges");
      getDataAndRender(vbadgepoints, "badgepoints");
      getDataAndRender(vbadgepointsmotion, "badgepoints");
    }
    google.setOnLoadCallback(drawVisualizations);
  </script>
  <div class="main-content">
    <header>
    <ul class="action-buttons clearfix fr">
      <li><a href="/html/help/analytics.html" class="button button-gray no-text help" rel="#overlay">Help<span class="help"></span></a></li>
    </ul>
    <h2>
      Analytics
    </h2>
    </header>
    <section>
         <h1>API Calls</h1> 
          <h2>Number of API Calls Made Over Time</h2>
          <div id="APICallsVisualization" style="width:700px; height:400px;"></div>
    </section>
    <section>
        <h1>Points Awarded</h1>
        <h2>Number of Points Awarded Over Time</h2>
        <div id="PointsVisualization" style="width:700px; height:400px;"></div>
    </section>
    <section>
        <h1>Badge Points</h1>
        <h2>Number of Points Awarded Towards a Badge Over Time</h2>
        <div id="BadgePointsVisualization" style="width:700px; height: 400px;"></div>
        <h2>Motion Chart</h2>
        <div id="BadgePointsVisualizationMotion" style="width:700px; height: 400px;"></div>
    </section>
    <section>
       <h1>Badges Awarded</h1>
       <h2>Number of Times a Badge was Awarded Over Time</h2>
        <div id="BadgesVisualization" style="width:700px; height: 400px;"></div>
        <h2>Motion Chart</h2>
        <div id="BadgesVisualizationMotion" style="width:700px; height: 400px;"></div>
    </section>
  </div>
</section>
